Services

Como generar services en angular y como utilizarlos

Los services nos permiten centralizar metodos para que puedan ser utilizados por distintos componentes para asi poder usarlos como medio de comunicación entre componentes

Para generar un servicio lo podemos hacer con el siguiente comando:

ng generate service <Nombre Servicio>

NOTA:Si queremos crear el servicio dentro de la carpeta de un componente lo hacemos con el formato: componente/servicio

En este ejemplo tenemos dos componentes, MaquinaBebidas y Test y a mayores tenemos un servicio Bebida

En este caso el servicio bebida manejará un array de bebidas, que podremos modificar desde MaquinaBebidas y que se visualizará tambien desde el componente Test, haciendolo todo a traves del servicio Bebida

Codigo componente MaquinaBebidas:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { BebidaService } from '../bebida.service';
import { FormControl } from '@angular/forms';


@Component({
  selector: 'app-maquina-bebidas',
  templateUrl: './maquina-bebidas.component.html',
  styleUrls: ['./maquina-bebidas.component.css'],
})
export class MaquinaBebidasComponent implements OnInit {

  public listadoBebidas:Array<string>;

  bebida = new FormControl('');


  constructor(
    private bebidaService: BebidaService
  ) { }


  ngOnInit(): void {
    this.listadoBebidas = this.bebidaService.getBebida();
  }

  addBebida(bebida:string){
    this.bebidaService.addBebida(bebida);
  }

  addBebidaKeyboard(bebida:string, event: any){
    this.listadoBebidas.push(bebida);
    this.bebida.setValue("");
  }

  delBebida(indice:number){
    this.listadoBebidas.splice(indice, 1);
  }
}

Codigo componente Test:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { BebidaService } from '../bebida.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  public listadoBebidas:Array<string>;

  name:string = "";

  constructor(
    private route: ActivatedRoute,
    private bebidaService: BebidaService
  ) {
  }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.name = params['name'];
    });

    this.listadoBebidas = this.bebidaService.getBebida();
  }

}

Codigo servicio Bebida:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BebidaService {

  constructor() { }

  public listadoBebidas:Array<string> = ['refresco', 'agua'];

  addBebida(bebida:string){
    this.listadoBebidas.push(bebida);
  }

  getBebida(){
    return this.listadoBebidas;

  }
}

Si entramos en la ruta que carga el componente de MaquinaBebidas vemos esto:

Y las modificaciones que hagamos dentro de dicho componente, se reflejan en el componente de Test:

Angular | Services